<template>
  <div class="page">
    <!-- <div class="text_1 flex-row items-center justify-between">
      <input type="text" placeholder="请输入关键字">
      <img src="../assets/fd.png" alt="">
    </div> -->
    <div class="text_2">内容分析</div>
    <div class="text_3 flex-row justify-between">
      <div>
        <div class="text_4">
          小程序用户
        </div>
        <div class="text_5">
          {{ data.yfzrs }}
        </div>
        <div class="text_6 flex-row justify-between">
          <div class="flex-row items-center">周：<img src="../assets/up-icon.png" alt="">38%</div>
          <div class="flex-row items-center">月：<img src="../assets/down-icon.png" alt="">38%</div>
        </div>
      </div>
      <div>
        <div class="text_4">
          昨日新增用户
        </div>
        <div class="text_5">
          {{ data.reszrxzrs }}
        </div>
      </div>
      <div>
        <div class="text_4">
          试驾人数
        </div>
        <div class="text_5">
          {{ data.ressjzrs }}
        </div>
        <div class="text_6 flex-row justify-between">
          <div class="flex-row items-center">周：<img src="../assets/up-icon.png" alt="">38%</div>
          <div class="flex-row items-center">月：<img src="../assets/down-icon.png" alt="">38%</div>
        </div>
      </div>
      <div>
        <div class="text_4">
          兑换礼品
        </div>
        <div class="text_5">
          0
        </div>
        <div class="text_6 flex-row justify-between">
          <div class="flex-row items-center">周：<img src="../assets/up-icon.png" alt="">38%</div>
          <div class="flex-row items-center">月：<img src="../assets/down-icon.png" alt="">38%</div>
        </div>
      </div>
    </div>
    <div class="text_7" id="aa">
      <div class="text_8">
        数据趋势
      </div>
      <div class="text_9 flex-row items-center">
        <div class="text_10">选择数据</div>
        <div class="text_11 flex-row items-center">
          <div class="text_12" v-for="(item, index) in nav" :key="index" :class="index == i ? 'colorR' : ''"
            @click="choose(index)">
            {{ item }}
          </div>
        </div>
      </div>
      <div class="text_9 flex-row items-center">
        <div class="text_10">数据时间</div>
        <div class="text_13 flex-row items-center justify-between">
          <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" @change="change" v-if="i==0">
          </el-date-picker>
          <el-date-picker
            v-model="Ljtime"
            type="date"
            placeholder="选择日期" v-if="i==1" @change="changeLj">
          </el-date-picker>
        </div>
      </div>
      <div ref="chart" id="chart" class="tb"></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      nav: ["新增用户", "累计关注"],
      i: 0,
      startTime: "",
      endTime: "",
      time: "",
      Ljtime:"",
      data: {

      }
    }
  },
  mounted() {
    this.getData()


  },
  methods: {
    getData() {
      let data = {
        starttime: this.startTime,
        endtime: this.endTime
      }
      this.$http.post("/index.php/index/adminindex/index", data).then(res => {
        if (res.code == 200) {
          this.data = res.data;
          let xdata = [];
          let ydata = [];
          if (res.data.resqx) {
            for (let i in res.data.resqx) {
              xdata.push(res.data.resqx[i].createtime)
              ydata.push(res.data.resqx[i].rs)
            }
          }
          this.getEcharts(xdata, ydata)
        }
      })
    },
    // 累计关注
    getLjgz(){
      let data={
        endtime:this.Ljtime
      }
      this.$http.post("/index.php/index/adminindex/czrs",data).then(res=>{})
    },
    change() {
      if (this.time[0]) {
        this.startTime = this.formatDate(this.time[0])
      }
      if (this.time[1]) {
        this.endTime = this.formatDate(this.time[1])
      }
      this.getData()
    },
    changeLj(){
      this.Ljtime=this.formatDate(this.Ljtime)
      this.getLjgz();
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    },
    getEcharts(xdata, ydata) {
      const chartDom = document.getElementById('chart');
      const chart = echarts.init(chartDom);
      // 使用Echarts提供的API绘制图表
      chart.setOption({
        grid: {
          left: '6%',
          right: '0%'
        },
        xAxis: {
          type: 'category',
          data: xdata,
        },
        yAxis: {
          type: 'value',

        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) { // 自定义 tooltip 的格式化函数
            console.log(params)
            return params[0].name + '<br />' +
              '新增用户'+ params[0].data
          }
        },
        series: [
          {
            data: ydata,
            type: 'line'
          }
        ]
      })
      window.addEventListener('resize', () => {
        // 获取父容器的宽度，并动态设置图表宽度
        const parentWidth = document.getElementById('chart').clientWidth
        chart.resize({ width: parentWidth })

        // 使用原始的选项对象重新绘制图表
        const option = chart.getOption()
        chart.setOption(option, true)
      })
    },
    choose(index) {
      this.i = index;
      this.Ljtime="";
      this.startTime="";
      this.endTime="";
      if(index==1){
        this.getLjgz()
      }
    }
  }
}
</script>
<style>
.el-input__inner {
  background-color: none !important;
}
.el-date-editor .el-range-separator{
  padding: 0 15px !important;
}
</style>
<style scoped>
.page {
  padding: 25px 60px;
}

.text_1 {
  width: 300px;
  height: 50px;
  line-height: 50px;
  border-radius: 50px;
  background: #EDEDED;
  padding: 0 28px;
}

.text_1 input {
  flex: 1;
  margin-right: 30px;
}

.text_1 img {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

input {
  border: none;
  background: none;
  outline: none;
}

.text_2 {
  font-size: 24px;
  margin-top: 39px;
}

.text_3 {
  margin-top: 27px;
  padding: 81px;
  border-radius: 10px;
  background: #F3F3F3;
}

.text_3>div {
  text-align: center;
}

.text_4 {
  font-size: 14px;
}

.text_5 {
  margin-top: 14px;
  font-size: 48px;
  color: #000000;
}

.text_6 {
  margin-top: 24px;
  padding: 0 6px;
  font-size: 14px;
}

.text_7 {
  margin-top: 16px;
  padding: 36px 33px;
  background: #F3F3F3;
}

.text_8 {
  font-size: 24px;
}

.text_9 {
  margin-top: 17px;
}

.text_10 {
  font-size: 16px;
  color: #767676;
  margin-right: 17px;
}

.text_11 {
  border-radius: 5px;
  width: 156px;
  height: 28px;
  line-height: 28px;
  overflow: hidden;
}

.text_12 {
  padding: 6px 15px;
  background: #DCDCDC;
  color: #000;
  cursor: pointer;
  font-size: 12px;
}

.colorR {
  background: #FF0000 !important;
  color: #fff !important;
}

.text_13 {
  /* background: #DCDCDC; */
  font-size: 14px;
  font-weight: bold;
  color: #909090;
  width: 300px;
  border-radius: 5px;
}

.text_13 input {
  width: 100px;
  cursor: pointer;
}

.tb {
  height: 300px;
  width: 100%;
}

.tb>div {
  width: 100% !important;
}
</style>